<template>
    
  <div class="header">
    <div class="daohanglan">
      <div class="dingwei"><img src="../../assets/dingwei.png" alt="" /></div>
      <div class="bj">北京</div>
      <div class="xiala"><img src="../../assets/xiala.png" alt="" /></div>
      <input type="text" value="找明星、演出、场馆" />
    </div>

    <div class="zhongjian">
      <ul>
        <li>
          <img src="../../assets/yanchanghui.png" alt="" />
          <p>看演唱会</p>
        </li>
        <li>
          <img src="../../assets/huajugeju.png" alt="" />
          <p>话剧歌剧</p>
        </li>
        <li>
          <img src="../../assets/xiuxianzhanlan.png" alt="" />
          <p>休闲展览</p>
        </li>
        <li>
          <img src="../../assets/xiquxiangsheng.png" alt="" />

          <p>戏曲相声</p>
        </li>
        <li>
          <img src="../../assets/qinziyishu.png" alt="" />
          <p>亲子/艺术</p>
        </li>
      </ul>
      <div class="jinribiqiang">
        <div class="biqiang">
          <img src="../../assets/jinribiqiang.png" alt="" />
        </div>
        <div class="gengduobiqiang">
          <p>更多必抢</p>
          <div class="jiantou">
            <img src="../../assets/jiantou.png" alt="" />
          </div>
        </div>
      </div>

      <ul class="meiwen">
        <li>
          <img src="../../assets/meiwen.png" alt="" />
        </li>
        <li><img src="../../assets/pinganye.png" alt="" /></li>
        <li><img src="../../assets/wodelixiang.png" alt="" /></li>
      </ul>
      <div class="‘qiangpiao">
        <div class="qiangpiao1">
          <img src="../../assets/qiangpiao.png" alt="" />
        </div>
        <div class="qiangpiao2">
          <img src="../../assets/qiangpiao.png" alt="" />
        </div>
        <div class="qiangpiao3">
          <img src="../../assets/qiangpiao.png" alt="" />
        </div>
      </div>
      <div class="kaixinmahua">
        <div class="mahua">开心麻花2020奇<br />幻爆笑贺岁舞台...</div>
        <div class="riben">日本圆谷版奥特曼<br />系列舞台剧———..</div>

        <div class="dianying">【电影分镜展 不能<br />错过】[光影之...</div>
      </div>

      <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
        <van-swipe-item
          ><img src="../../assets/yangkun.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/aiqing.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/qiaozhi.png" alt=""
        /></van-swipe-item>
      </van-swipe>
      <h3 class="daka">大咖新动态</h3>
      <van-swipe class="mingxing" :autoplay="2000" indicator-color="white">
        <van-swipe-item
          ><img src="../../assets/mingxing1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/mingxing3.png" alt="" />
        </van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/mingxing4.png" alt="" />
        </van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/mingxing5.png" alt="" />
        </van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/mingxing6.png" alt="" />
        </van-swipe-item>
      </van-swipe>
      <h3 class="zhidekansize">什么值得看</h3>
      <van-swipe class="zhidekan" :loop="false" :width="100">
        <van-swipe-item
          ><img src="../../assets/zhidekan6.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/zhidekan5.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/zhidekan4.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/zhidekan3.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/zhidekan2.png" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../assets/zhidekan1.png" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <h3 class="weinituijian">为你推荐</h3>
    <div class="box">
      <div class="item" v-for="item in list" :key="item.id">
        <img :src="item.posterUrl" />
        <div class="font">选座购票</div>
        <div class="title">[{{ item.cityName }}] {{ item.name }}</div>
        <div class="data">{{ item.showTimeRange }}</div>
        <div class="price">¥{{ item.lowestPrice }}起</div>
      </div>
      <!-- <div class="item">
        <img
          src="https://p0.meituan.net/myvideodistribute/88fe007fa4f719ca6b6486d094936fdb5241147.jpg@338w_450h_1c_1e"
          alt=""
        />
        <div class="font">选座购票</div>
        <div class="title">[北京] 【限时抢1折冰乐园票】悠唐购物中心冰乐园</div>
        <div class="data">2020.12.7 - 2021.1.15</div>
        <div class="price">¥29起</div>
      </div> -->
      <!-- <div class="item">
        <img
          src="https://p0.meituan.net/myvideodistribute/88fe007fa4f719ca6b6486d094936fdb5241147.jpg@338w_450h_1c_1e"
          alt=""
        />
        <div class="font">选座购票</div>
        <div class="title">[北京] 【限时抢1折冰乐园票】悠唐购物中心冰乐园</div>
        <div class="data">2020.12.7 - 2021.1.15</div>
        <div class="price">¥29起</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
import axios from "axios";
axios.defaults.baseURL =
  "https://show.maoyan.com/maoyansh/myshow/ajax/performances";
// axios.interceptors.response.use(
//   (response) => {
//     return response.data || response;
//   },
//   (error) => {
//     return Promise.reject(error);
//   }
// );
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {},
  async created() {
    const url = "/0;st=4;p=2;s=20;tft=0?sellChannel=13&cityId=1&lng=0&lat=0";
    // axios.get(url).then((res) => console.log(res.data.data));
    let res = await axios.get(url);
    console.log(res.data);
    this.list = res.data;
    // console.log(22222);
  },
};
</script>
<style lang='scss' scoped>
.header {
  width: 100%;
  height: 100%;
  float: left;

  .daohanglan {
    // float: left;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: #ffffff;

    .dingwei {
      margin: 10px 10px;
      float: left;

      img {
        width: 23px;
        height: 23px;
        float: left;
      }
    }
    .bj {
      float: left;
      width: 33px;
      height: 30px;
      margin-top: 12px;
      margin-left: -8px;
    }
    .xiala {
      float: left;
      width: 23px;
      height: 23px;
      margin-top: 11px;
      img {
        width: 23px;
        height: 23px;
        float: left;
      }
    }
    input {
      border-radius: 5px; /*设置圆角半径*/
      height: 30px; /*input高度*/
      width: 225px; /*input宽度*/
      background-image: url("../../assets/fangdajing.png"); /*设置图片的地址*/
      background-size: 20px 20px; /*这里是图片的大小*/
      background-repeat: no-repeat; /*让图片不重复*/
      background-position: 3px; /*图片在input中的位置  离左边的距离和离右边的距离*/
      padding-left: 30px;
      background-color: #f5f5f5;
      margin-left: 5px;
      margin-top: 9px;
      outline: none;
      border: none;
      color: #999;
    }
  }
  .zhongjian {
    height: 100%;
    width: 100%;
    // background-color: red;
    margin-top: 60px;

    .yanchanghui {
      width: 300px;
      height: 300px;
      img {
        width: 250px;
        height: 250px;
      }
    }
    ul {
      height: 100px;
      width: 100%;
      display: flex;
      margin-top: 14px;

      li {
        padding: 10px 10px;
        justify-content: center;

        img {
          width: 50px;
          height: 50px;
        }
        p {
          font-size: 10px;
        }
      }
    }
    .jinribiqiang {
      width: 100%;
      height: 50px;
      float: left;
      margin-top: 20px;
      .biqiang {
        width: 100px;
        height: 50px;
        float: left;

        img {
          width: 99px;
          height: 30px;
        }
      }
      .gengduobiqiang {
        width: 100px;
        height: 30px;
        border-radius: 20%;
        float: right;
        line-height: 30px;
        background: #f5f5f5;
        margin-right: 10px;

        p {
          float: right;
          width: 90px;
          height: 25px;
        }
        .jiantou {
          float: right;
          width: 20px;
          height: 20px;
          margin-right: -90px;
          margin-top: 3px;
        }
      }
    }
    .meiwen {
      width: 100%;
      height: 160px;
      li {
        width: 370px;
        height: 300px;
        padding: 1px;
        margin-left: -10px;

        img {
          width: 120px;
          height: 150px;
        }
      }
    }
    .qiangpiao {
      width: 100%;
      height: 25px;
      float: left;
    }
    .qiangpiao1 {
      float: left;

      img {
        width: 100px;
        height: 20px;
      }
    }
    .qiangpiao2 {
      float: left;
      margin-left: 25px;

      img {
        width: 100px;
        height: 20px;
      }
    }
    .qiangpiao3 {
      float: left;
      margin-left: 25px;

      img {
        width: 100px;
        height: 20px;
      }
    }
    .kaixinmahua {
      width: 370px;
      height: 40px;
      float: left;
      .mahua {
        float: left;
        width: 120px;
        height: 40px;
        font-size: 13px;
        font-weight: bold;

        //   background: red;
      }
      .riben {
        float: left;
        width: 120px;
        height: 80px;
        font-size: 13px;
        font-weight: bold;

        //   background: red;
      }
      .dianying {
        float: right;
        width: 120px;
        height: 40px;
        font-size: 13px;
        font-weight: bold;
      }
    }
    .my-swipe {
      width: 346px;
      height: 100%;
      padding-top: 30px;
      padding-left: 15px;

      img {
        width: 346px;
        height: 66px;
      }
    }
    .daka {
      margin-top: 20px;
    }
    .mingxing {
      width: 100%;
      height: 120px;
      padding-top: 10px;

      img {
        width: 100%;
        height: 120px;
      }
      p {
        width: 50px;
        height: 50px;
        margin-left: 4px;
      }
    }
    .zhidekansize {
      width: 100%;
      height: 20px;
      margin-top: 25px;
    }
    .zhidekan {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      margin-right: 5px;

      img {
        width: 120px;
        height: 200px;
      }
    }
  }
  .weinituijian {
    width: 100%;
    height: 64px;
    margin-top: 25px;
  }
  .box {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2px;
    justify-content: space-around;
  }
  .item {
    // position: relative;
    // flex-direction: column;
    justify-content: space-around;
    flex: 1;
    // justify-content: space-between;
    padding: 0 9px;
    .font {
      font-size: 16px;
      width: 74px;
      color: red;
    }
    .title {
      width: 160px;
      height: 20px;
      font-size: 14px;
    }
    .data {
      font-size: 10px;
      color: #cccccc;
      width: 120px;
      margin-top: 35%;
    }
    .price {
      font-size: 14px;
      color: red;
      width: 52px;
    }
  }
  .item img {
    width: 168px;
    height: 225px;
  }
}
</style>
